<template>
    <div class="role-container">
        <div class="control-area">
            <router-link to="/permission/role-create">
                <el-button type="primary" size="small" icon="el-icon-circle-plus-outline" v-has="'system:role:add'">添加角色</el-button>
            </router-link>
        </div>

            <el-table
                :data="roleTable"
                style="width: 100%"
                row-key="id"
                size="small"
                stripe
                border>
                <el-table-column
                    prop="roleName"
                    label="角色名称">
                </el-table-column>
                <el-table-column
                    prop="roleKey"
                    label="角色标识"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="type"
                    label="类型"
                    width="80"
                    align="center">
                    <template slot-scope="scope">
                        {{ scope.row.type == 0 ? '全局' : '自定' }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="status"
                    label="状态"
                    width="60"
                    align="center">
                    <template slot-scope="scope">
                        {{ scope.row.status == 0 ? '停用' : '启用' }}
                    </template>
                </el-table-column>
                <el-table-column
                    fixed="right"
                    label="操作"
                    width="160"
                    align="center"
                   >
                    <template slot-scope="scope">
<!--                        <el-button-->
<!--                            @click.native.prevent="deleteRow(scope.$index, scope.row)"-->
<!--                            type="info"-->
<!--                            plain-->
<!--                            size="mini">-->
<!--                            查看-->
<!--                        </el-button>-->
                        <el-button
                            @click.native.prevent="updateRow(scope.$index, scope.row)"
                            type="primary"
                            plain
                            size="mini"
                            v-has="'system:role:update'"
                            >
                            修改
                        </el-button>
                        <el-button
                            @click.native.prevent="copyRow(scope.$index, scope.row)"
                            plain
                            size="mini"
                            v-has="'system:role:add'"
                            >
                            复制
                        </el-button>
<!--                        <div style="margin-left: 10px; float: right">-->
<!--                            <el-popconfirm title="确定删除？" @confirm="deleteRow(scope.$index, scope.row)">-->
<!--                                <el-button-->
<!--                                    type="danger"-->
<!--                                    plain size="mini"-->
<!--                                    slot="reference"-->
<!--                                    disabled>-->
<!--                                    删除-->
<!--                                </el-button>-->
<!--                            </el-popconfirm>-->
<!--                        </div>-->

                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    layout="prev, pager, next"
                    :current-page="page.current"
                    :page-size="page.size"
                    :total="page.total"
                    @current-change="changePage">
                </el-pagination>
            </div>


    </div>
</template>

<script>
import {getRoleByPage} from "src/api/permission";

export default {
    name: "RoleList",
    data() {
        return {
            roleTable: [],
            page: {
                current: 1,
                size: 10,
                total: 0
            }
        }
    },
    activated() {
        this.getRoleList(this.page.current)
    },
    methods: {
        getRoleList(current) {
            getRoleByPage({
                page: current,
                pageSize: this.page.size
            }).then(response => {
                this.roleTable = response.data.records
                this.page.current = response.data.current
                this.page.total = response.data.total
            })
        },
        changePage(current) {
            this.getRoleList(current)
        },
        deleteRow(index, row) {

        },
        updateRow(index, row) {
            this.$router.push({
                path: '/permission/role-update',
                query: {id: row.id}
            })
        },
        copyRow(index, row) {
            this.$router.push({
                path: '/permission/role-create',
                query: {id: row.id}
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.role {
    &-container {
        margin: 30px;

        .control {
            &-area {
                margin-bottom: 8px;
            }
        }

        .pagination {
            margin-top: 12px;
            display: flex;
            justify-content: center
        }
    }
}
</style>
